<template>
  <div id="SelectVegetable">
    <div class="box">
      <div class="left">
        <div class="nav">
          <div class="iconfont icon-fanhui a" @click="$router.push('/createOrder')"></div>

          <div class="two">选择客户</div>

          <div class="ss">
            <div class="left1">
              <img src="./img/1.png" alt style="width: 100%;height: 100%;" />
            </div>
            <div class="right1">
              <input type="text" placeholder="请输入搜索"
                style="width: 100%;height: 100%;background: white;border: 0;outline: none;" />
            </div>
          </div>
        </div>

        <div class="content">
          <div class="content1">
            <div class="content1-box" v-for="(item, index) in catedata" :key="item._id" @click="tagcate(item._id, index)"
              :class="cateindex == index ? 'content1-box-active' : ''">
              <div class="con1">菜品分类</div>
              <div class="con2">{{ item.cname }}</div>
            </div>
          </div>

          <div class="content2">
            <div class="content2-box" v-for="(item) in vegetable" :key="item._id" v-show="item.cid == cateid">
              <div class="cai1">
                <img :src="item.img" alt style="width: 100%;height: 100%;border-radius:12px" />
              </div>
              <div class="cai2">
                <div class="cai2-1">{{ item.name }}</div>
                <span class="cai2-2">菜肴详细信息</span>
              </div>
              <div class="cai3">
                <div class="cai3-1">￥{{ item.price }}</div>

                <div class="cai3-2">
                  <div class="jian" @click="jian(item)">-</div>
                  <div class="shuzi">{{ item.num }}</div>
                  <div class="jia" @click="jia(item)">+</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="right-1">
          <div class="right-aa">
            <div class="right1-a">客户信息</div>
            <div class="right1-b">{{ name1 }}</div>
            <div class="right1-c">[黄金会员]</div>
            <div class="right1-d">2024年02月02日</div>
          </div>

          <div class="right-bb">
            <div class="table">A7</div>
          </div>
        </div>

        <div class="right-2">
          <div class="oderxq">订单详情</div>

          <div class="oderbox" v-for="(item, index) in vegetable" :key="index" v-show="item.num != 0">
            <div class="oderbox-left">
              <div class="order-1">{{ item.name }}</div>
              <div class="order-2">注意:{{ item.remark }}</div>
              <div class="order-3">
                <span class="iconfont icon-beizhu b"></span>
                <span class="bb" @click="addremark(item._id)">填写备注</span>
              </div>
            </div>

            <div class="orderr">
              <div class="orderr-1">X{{ item.num }}</div>
              <div class="orderr-2">￥{{ item.num * item.price }}</div>
            </div>
          </div>
        </div>

        <div class="xiaoji">
          <div class="xiao1">小计</div>
          <div class="xiao2">￥{{ total.toFixed(2) }}</div>
        </div>

        <div class="shuilv">
          <div class="s1">税率(5%)</div>
          <div class="s2">￥{{ tax.toFixed(2) }}</div>
        </div>

        <div class="connect">
          <div class="ca">￥{{ maxtotal.toFixed(2) }}</div>
          <div class="cb">
            继续订单
            <span class="iconfont icon-youjiantou c" @click="zhifu()"></span>
          </div>
        </div>
      </div>

      <!-- 备注弹出 -->
      <Transition name="modal">
        <div v-if="showModal" class="modal">
          <div class="modal-content">
            <div class="title">
              <span>添加备注</span>
            </div>

            <input class="inputaa" type="text" placeholder="请输入备注......" v-model="inputremark" />

            <div style="margin-top:10%;">
              <el-button style="width:30%;height:50px;margin-left:15%;font-size: 21px;color: #666;"
                @click="showModal = false">取消</el-button>
              <el-button style="width:30%;height:50px;margin-left:11%;font-size: 21px;" type="primary"
                @click="comfirmadd()">确认</el-button>
            </div>
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
// 接收路由传递过来的参数
const name1 = ref("");

// const tabledata = reactive([]);
// 获取数据
// const getdata = () => {
//   axios.get(`http://127.0.0.1:3000/showuser`).then(res => {
//     Object.assign(tabledata, res.data.data);
//   });
// };

// 菜品分类
const catedata = reactive([]);
// 获取菜品分类
const getCate = () => {
  axios.get(`http://127.0.0.1:3000/getcate`).then(res => {
    Object.assign(catedata, res.data.data);
  });
};

// 菜品分类颜色切换
// 菜品切换
const cateid = ref("6662734770f363731b04ba80");
const cateindex = ref(0);
const tagcate = (id, index) => {
  cateid.value = id;
  cateindex.value = index;
  console.log(cateid.value);
};

// 菜品
const vegetable = reactive([]);
// 获取菜品
const getvegetable = () => {
  axios.get(`http://127.0.0.1:3000/showcuisine`).then(res => {
    Object.assign(vegetable, res.data.data);
  });
};

// 数量加减
const jian = item => {
  // 向后端发送请求
  if (item.num > 0) {
    item.num--;
    axios
      .put(`http://127.0.0.1:3000/updatecuisine`, {
        _id: item._id,
        num: item.num
      })
      .then(res => {
        console.log(res.data.code);
      });
  }
};

const jia = item => {
  item.num++;
  axios
    .put(`http://127.0.0.1:3000/updatecuisine`, {
      _id: item._id,
      num: item.num
    })
    .then(res => {
      console.log(res.data.code);
    });
};

// 计算总价
const total = computed(() => {
  let sum = 0;
  vegetable.forEach(item => {
    sum += item.num * item.price;
  });
  return sum;
});

// 税价
const tax = computed(() => {
  const taxnum = total.value * 0.05;
  return taxnum;
});

// 总价和税价之和
const maxtotal = computed(() => {
  const max = total.value * 1.05;
  return max;
});

// 备注弹出
// 弹出层
const showModal = ref(false);
// 备注

const remarkid = ref("");

const addremark = id => {
  showModal.value = true;
  remarkid.value = id;
};

const inputremark = ref("");

// 确认备注
const comfirmadd = () => {
  let obj = vegetable.find(item => item._id === remarkid.value);
  obj.remark = inputremark.value;
  showModal.value = false;
  inputremark.value = "";
};

// 跳转支付1111
const zhifu = () => {
  let obj1 = {
    name: JSON.parse(localStorage.getItem("name")),
    personNum: JSON.parse(localStorage.getItem("personNum")),
    userid: JSON.parse(localStorage.getItem("uid")),
    state: 0,
    Table_name:
      JSON.parse(localStorage.getItem("baoname")) ||
      JSON.parse(localStorage.getItem("tableorder")),
    Menu_num: vegetable.filter(item => item.num > 0).length,
    // 下单时间
    ordertime: new Date().toLocaleString(),
    //总价
    orderprice: 0,
    // 服务员id
    waiterid: JSON.parse(sessionStorage.getItem("username"))
  };
console.log(obj1);

  axios.post(`http://127.0.0.1:3000/addorder`, obj1).then(res => {
    console.log(res.data.code);
  });

  let listobj = vegetable.filter(item => item.num > 0);

  listobj.forEach(e => {
    // 获取local中的uid
    let obj = {
      name: e.name,
      price: e.price,
      num: e.num,
      pid: JSON.parse(localStorage.getItem("uid"))
    };
    axios.post(`http://127.0.0.1:3000/addmenu`, obj).then(res => {
      console.log(res.data.code);
    });
  });

  let obj1 = {
    name: JSON.parse(localStorage.getItem("name")),
    personNum: JSON.parse(localStorage.getItem("personNum")),
    userid: JSON.parse(localStorage.getItem("uid")),
    state: 0,
    Table_name: JSON.parse(localStorage.getItem("baoname"))|| JSON.parse(localStorage.getItem("tableorder")),
    Menu_num:vegetable.filter(item=>item.num>0).length,
    // 下单时间
    ordertime:new Date().toLocaleString(),
    //总价
    orderprice:total.value,
    // 服务员id
    waiterid:JSON.parse(sessionStorage.getItem('_id'))
  };

  axios.post(`http://127.0.0.1:3000/addorder`, obj1).then(res => {
    console.log(res.data.code);
  });

  router.push("/home");
};

onMounted(() => {
  getCate();
  getvegetable();

  name1.value = JSON.parse(localStorage.getItem("name"));
  console.log(name1.value);
  console.log(localStorage.getItem("uid"));
});
</script>

<style lang="less" scoped>
#SelectVegetable {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 100%;
    height: 93%;
    background: #f5f5f5;
    display: flex;
    justify-content: flex-start;

    .left {
      width: 64%;
      height: 100%;
      background: #f5f5f5;

      .nav {
        width: 100%;
        height: 10%;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #f5f5f5;

        .a {
          color: black;
          padding-top: 1%;
          padding-left: 3%;
          font-size: 3vh;
        }

        .two {
          width: 15%;
          height: 45%;

          margin-left: 2%;
          font-size: 29px;
          text-align: center;
          font-weight: 600;
        }

        .ss {
          width: 52%;
          height: 60%;
          background: white;
          border-radius: 12px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 16%;
          margin-top: 1%;

          .left1 {
            width: 8%;
            height: 63%;
            background: white;
            margin-left: 3%;
          }

          .right1 {
            width: 70%;
            height: 63%;
            margin-left: 3%;
          }
        }
      }

      .content {
        width: 100%;
        height: 80%;

        display: flex;
        justify-content: space-between;
        background-color: #f5f5f5;

        .content1 {
          width: 30%;
          height: 100%;

          background-color: #f5f5f5;

          .content1-box {
            width: 80%;
            height: 117px;

            margin-left: 11%;
            border-radius: 10px;

            margin-top: 12%;
            background: white;

            .con1 {
              width: 100%;
              height: 50%;

              color: black;
              font-size: 26px;
              line-height: 68px;
              padding-left: 12%;
            }

            .con2 {
              width: 100%;
              height: 50%;

              color: #636566;
              font-size: 19px;
              line-height: 53px;
              padding-left: 12%;
            }
          }

          .content1-box-active {
            width: 80%;
            height: 117px;

            margin-left: 11%;
            border-radius: 10px;

            margin-top: 12%;
            background: #dceefe;

            .con1 {
              width: 100%;
              height: 50%;

              color: rgb(106, 106, 210);
              font-size: 26px;
              line-height: 68px;
              padding-left: 12%;
            }

            .con2 {
              width: 100%;
              height: 50%;

              color: #636566;
              font-size: 19px;
              line-height: 53px;
              padding-left: 12%;
            }
          }
        }

        .content2 {
          width: 65%;
          height: 100%;

          background-color: #f5f5f5;
          display: flex;
          justify-content: space-between;
          align-content: flex-start;
          flex-wrap: wrap;

          .content2-box {
            width: 48%;
            height: 29vh;

            background: white;
            border-radius: 12px;
            margin-top: 9%;

            .cai1 {
              width: 85%;
              height: 50%;
              border-radius: 12px;

              margin-left: 8%;
            }

            .cai2 {
              width: 85%;
              height: 28%;

              margin-left: 8%;

              .cai2-1 {
                width: 100%;
                height: 50%;
                font-size: 20px;
                padding-top: 4px;
              }

              .cai2-2 {
                width: 100%;
                height: 50%;
                font-size: 15px;
                padding-top: 2px;
              }
            }

            .cai3 {
              width: 85%;
              height: 22%;

              margin-left: 8%;
              display: flex;
              justify-content: space-between;

              .cai3-1 {
                width: 50%;
                height: 100%;

                line-height: 57px;
                font-size: 24px;
              }

              .cai3-2 {
                width: 50%;
                height: 100%;

                display: flex;
                justify-content: flex-start;
                align-items: center;

                .jian {
                  width: 26px;
                  height: 26px;
                  border-radius: 50%;
                  background: #025cca;
                  color: white;
                  text-align: center;
                  line-height: 19px;
                  font-size: 42px;
                }

                .shuzi {
                  width: 30%;
                  height: 100%;

                  margin-left: 8%;
                  text-align: center;
                  font-size: 27px;
                  line-height: 61px;
                }

                .jia {
                  width: 26px;
                  height: 26px;
                  border-radius: 50%;
                  background: #025cca;
                  margin-left: 10%;
                  line-height: 26px;
                  font-size: 31px;
                  color: white;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }

    .right {
      width: 30%;
      height: 90%;
      background: white;
      margin-left: 3%;
      border-radius: 12px;
      padding-left: 3%;
      margin-top: 23px;

      .right-1 {
        width: 100%;
        height: 22%;

        display: flex;
        justify-content: space-between;
        margin-top: 15px;

        .right-aa {
          width: 70%;
          height: 100%;

          .right1-a {
            font-size: 25px;
            font-weight: 600;
          }

          .right1-b {
            font-size: 23px;

            margin-top: 5%;
          }

          .right1-c {
            font-size: 17px;
            margin-top: 5%;
          }

          .right1-d {
            font-size: 17px;
            margin-top: 5%;
          }
        }

        .right-bb {
          width: 30%;
          height: 100%;

          display: flex;

          align-items: center;

          .table {
            width: 53%;
            height: 26%;
            background: #f0f8ff;
            border-radius: 12px;
            text-align: center;
            line-height: 48px;
            font-size: 17px;
            color: #4d87dd;
            margin-left: -18%;
          }
        }
      }

      .right-2 {
        width: 100%;
        min-height: 6%;

        .oderxq {
          width: 100%;
          height: 10%;

          font-size: 25px;
          font-weight: 600;
        }

        .oderbox {
          width: 100%;
          height: 23%;

          display: flex;
          justify-content: flex-start;
          border-bottom: 1px solid gainsboro;
          margin-bottom: 3%;

          .oderbox-left {
            width: 60%;
            height: 100%;

            .order-1 {
              font-size: 21px;
              margin-top: 5%;
            }

            .order-2 {
              font-size: 16px;
              margin-top: 1%;
            }

            .order-3 {
              width: 37%;
              height: 21%;
              background: #f0f8ff;
              margin-left: 1%;
              margin-top: 3%;
              border-radius: 12px;
              line-height: 22px;

              .b {
                font-size: 19px;
              }

              .bb {
                font-size: 15px;
                color: #027ed9;
              }
            }
          }

          .orderr {
            width: 40%;
            height: 100%;

            .orderr-1 {
              width: 100%;
              height: 50%;

              font-size: 19px;
              line-height: 10px;

              padding-top: 14%;
              font-weight: 600;
              padding-left: 33%;
            }

            .orderr-2 {
              width: 100%;
              height: 50%;
              padding-left: 5%;

              font-size: 19px;
              line-height: 10px;

              padding-top: 15%;
              font-weight: 600;
            }
          }
        }
      }

      .xiaoji {
        width: 100%;
        height: 4%;
        display: flex;
        justify-content: space-between;

        .xiao1 {
          width: 50%;
          height: 100%;
          font-size: 18px;
          padding-top: 1%;
        }

        .xiao2 {
          width: 50%;
          height: 100%;
          font-size: 19px;
          padding-top: 3px;
          font-weight: 600;
          padding-left: 11%;
        }
      }

      .shuilv {
        width: 100%;
        height: 4%;
        display: flex;
        justify-content: space-between;

        .s1 {
          width: 50%;
          height: 100%;
          font-size: 18px;
          padding-top: 1%;
        }

        .s2 {
          width: 50%;
          height: 100%;
          font-size: 19px;
          padding-top: 3px;
          font-weight: 600;
          padding-left: 14%;
        }
      }

      .connect {
        width: 80%;
        height: 7%;
        background: #025cca;
        border-radius: 12px;
        margin-top: 3%;
        margin-left: 1%;
        display: flex;
        justify-content: space-between;

        .ca {
          width: 50%;
          height: 100%;
          padding-top: 5%;
          font-size: 19px;
          color: white;
          padding-left: 12%;
        }

        .cb {
          width: 50%;
          height: 100%;
          padding-top: 5%;

          font-size: 18px;
          color: white;
          padding-left: 8%;

          .c {
            font-size: 17px;
            color: white;
            padding-left: 4%;
            padding-top: 5%;
          }
        }
      }
    }

    .modal {
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background-color: #fefefe;
      padding: 20px;
      border: 1px solid #888;
      width: 37%;
      height: 32%;
      border-radius: 13px;

      .title {
        width: 100%;
        height: 10%;
        line-height: 37px;
        font-size: 3vh;
        color: black;
        font-weight: 900;
        text-align: center;
      }

      .inputaa {
        width: 90%;
        height: 40%;
        background: #f5f5f5;
        margin-top: 9%;
        border-radius: 12px;
        border: none;
        outline: none;
        font-size: 20px;
        margin-left: 6%;
      }
    }

    .close-button {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close-button:hover,
    .close-button:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .modal-enter-active,
    .modal-leave-active {
      transition: opacity 0.3s, transform 0.3s;
    }

    .modal-enter-from,
    .modal-leave-to {
      opacity: 0;
      transform: scale(0.9);
    }
  }
}
</style>